<template>
  <div class="address" v-bind:style="{'height':clientHeight + 'px'}">
    <div class="address-list">
      <div
        class="address-item"
        v-for="(item, index) in addressList"
        v-bind:key="item.placeCode"
        :class="{ choose: item.placeCode === defaultCode }"
        @click="showEditor(index,item.placeCode,item.placeName,item.placeDes,item.isDefault)"
      >
        <div class="address-head">{{item.placeName}}  <img src="../../assets/img/home/addressIcong-white.png"></div>
        <div class="address-msg">{{item.placeDes}}</div>
        <div class="address-dev">
          <div class="address-dev-number">{{item.bindNum}}台<br><span>投放设备</span></div>
          <div class="address-default"><img src="../../assets/img/home/address-default.png">&nbsp;&nbsp;默认地址</div>
        </div>
      </div>
    </div>
    <div  class="input-button blue"  @click="chageAdd()">{{submit}}</div>
    <router-link id="register" to="/home"> <div class="input-button white">返回个人中心</div></router-link>
    <div
      v-show="isShowEditor"
      class="alert"
      v-bind:style="{'height':clientHeight + 'px'}"
      @click="closeEditor"
    >
      <div class="editor-part" v-bind:style="{bottom:showbottom}">
        <div @click.stop="editorAddress" class="line1">编辑</div>
        <div @click.stop="deleteAddress" class="line2">删除</div>
      </div>
    </div>
  </div>
</template>
<!--
  根据choose 更改当前地址是否为默认
  todo 需要加入点击对应地址后的弹窗
-->
<script>
import {PLACELIST, DEVALLOT, VXPlACEDEL} from '../../api/request'
import { Toast, Confirm } from 'vue-ydui/dist/lib.rem/dialog'
export default {
  name: 'index',
  data () {
    return {
      clientHeight: document.documentElement.clientHeight,
      chooseNum: 1,
      addressList: [],
      isShowEditor: false,
      path: '',
      choose: false,
      placeCode: '',
      place: '',
      placeDes: '',
      defaultCode: '',
      isDefault: '',
      index: 0,
      vid: ''
    }
  },
  created () {
    this.path = this.getStatus(this.$route.path)
    this.vid = this.$route.query.devId
    if (this.path === 'add') {
      this.submit = '添加地址'
      this.addlist()
    } else if (this.path === 'default') {
      this.submit = '确定'
      this.addlist()
    }
  },
  methods: {
    IsdefaultCode: function () {
      console.log(this.addressList.length)
      for (var i = 0; i < this.addressList.length; i++) {
        if (this.addressList[i].isDefault === 1) {
          this.defaultCode = this.addressList[i].placeCode
          this.placeCode = this.addressList[i].placeCode
        }
      }
    },
    showEditor: function (id, code, name, des, defal) {
      this.placeCode = code
      this.place = name
      this.placeDes = des
      this.isDefault = defal
      this.index = id
      if (this.path === 'add') {
        this.isShowEditor = true
      } else if (this.path === 'default') {
        this.isShowEditor = false
        this.defaultCode = code
        Confirm({
          mes: '是否选择当前地址',
          opts: () => {
            DEVALLOT(this.$store.getters.uid, code, this.vid).then(
              res => {
                let respData = res.data
                if (respData.code === 200) {
                  console.log(respData.code)
                  Toast({mes: '切换默认地址成功', timeout: 1000})
                  this.$router.go(-1)
                } else {
                }
              },
              error => {
                console.log(error)
              })
          }
        })
      }
    },
    closeEditor: function () {
      this.isShowEditor = false
    },
    editorAddress: function () {
      // console.log('editor')
      this.$router.push({path: '/addressDetail/edtadress', query: { place: this.place, placeDes: this.placeDes, placeCode: this.placeCode, isDeafult: this.isDeafult }})
    },
    deleteAddress: function () {
      VXPlACEDEL(this.$store.getters.uid, this.placeCode).then(
        res => {
          console.log(this.index)
          let respData = res.data
          if (respData.code === 200) {
            console.log(respData.code)
            this.isShowEditor = false
            Toast({mes: '删除地址成功', timeout: 1000})
            this.addressList.splice(this.index, 1)
          } else {
            this.isShowEditor = false
            Toast({mes: '删除地址失败', timeout: 1000})
          }
        },
        error => {
          console.log(error)
        })
    },
    getStatus (urlStr) {
      let urlStrArr = urlStr.split('/')
      return urlStrArr[urlStrArr.length - 1]
    },
    addlist: function () {
      const that = this
      PLACELIST(this.$store.getters.uid).then(
        res => {
          let respData = res.data
          if (respData.code === 200) {
            console.log(respData.data)
            that.addressList = that.addressList.concat(respData.data)
            this.IsdefaultCode()
          } else {
          }
        },
        error => {
          console.log(error)
        })
    },
    chageAdd: function () {
      console.log(this.submit)
      if (this.submit === '添加地址') {
        this.$router.push({path: '/addressDetail/addadress'})
      } else if (this.submit === '确定') {
        Confirm({
          mes: '是否选择当前地址',
          opts: () => {
            DEVALLOT(this.$store.getters.uid, this.placeCode, this.vid).then(
              res => {
                let respData = res.data
                if (respData.code === 200) {
                  console.log(respData.code)
                  Toast({mes: '切换默认地址成功', timeout: 1000})
                  this.$router.go(-1)
                } else {
                }
              },
              error => {
                console.log(error)
              })
          }
        })
      }
    }
  },
  computed: {
    showbottom: function () {
      if (this.isShowEditor) {
        return 3
      } else return 0
    }
  },
  watch: {
    '$route' (to, from) {
      console.log(this.path)
      if (this.path === 'add') {
        this.submit = '添加地址'
      } else if (this.path === 'default') {
        this.submit = '确定'
      }
    }
  }
}
</script>

<style scoped>
  .address {
    width: 100%;
    background-color: #ebebeb;
    padding-top: 0.2rem;
    position: relative;
    overflow-y: hidden;
  }
  .address-list {
    height: 70%;
    overflow: scroll;
  }
  .address-item {
    margin: 0 auto;
    margin-bottom: 0.2rem;
    position: relative;
    color: #8f8f8f;
    background-color: #fff;
    border-radius: 0.15rem;
    width: 7.37rem;
    padding-top: 0.2rem;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    height: 1.77rem;
  }

  .choose {
    color: #ffffff;
    background-color: #0092f8;
  }

  .address-head {
    font-size: 0.3rem;
    font-weight: 400;
  }

  .address-head img {
    vertical-align: bottom;
    width: 0.27rem;
    height: 0.33rem;
  }

  .address-msg {
    margin-top: 0.2rem;
    font-size: 0.24rem;
    line-height: 0.34rem;
    width: 4.95rem;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .address-dev {
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
  }

  .address-dev-number {
    font-size: 0.3rem;
    text-align: right;
    color: #0092f8;
  }

  .address-dev-number span {
    font-size: 0.24rem;
    color: #8f8f8f;
  }

  .address-default img {
    width: 0.13rem;
    height: 0.13rem;
    vertical-align: middle;
  }

  .address-default {
    margin-top: 0.2rem;
    vertical-align: middle;
    font-size: 0.24rem;
    font-weight: 400;
    color: #fff;
  }

  .choose .address-dev-number {
    color: #fff;
  }

  .choose .address-default {
    color: #fff;
  }

  .choose .address-dev-number span {
    color: #fff;
  }

  .white {
    background-color: #fff;
    color: #0092f8;
    box-shadow: 0 0 0.2rem 0.1rem rgba(194, 198, 199, 0.1);
    border-radius: 0.1rem;
    margin-top: 0.28rem;
  }

  .blue {
    margin-top: 0.5rem;
    box-shadow: 0 0 0.2rem 0.1rem rgba(194, 198, 199, 0.1);
    border-radius: 0.1rem;
    background-color: #0092f8;
  }

  .alert{
    position: absolute;
    top: 0;
    width: 7.5rem;
    background-color: rgba(0,0,0,0.7);
  }
  .editor-part{
    position: absolute;
    bottom: 0;
    height: 3rem;
    width: 100%;
    text-align: center;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    font-size: 0.48rem;
    background-color: #fff;
  }
  .line1{
    color: #738087;
    line-height: 1.5rem;
    border-bottom:  solid 1px #738087;
  }
  .line2{
    color: #d73b4a;
    line-height: 1.5rem;
  }
</style>
